<template>
  <div id="Sandcastle">停止绘制</div>
  <div id="cesiumContainer" class="fullSize"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';
import CesiumNavigation from 'cesium-navigation-es6';

import { CesiumNavigationOptions } from './cesium/initViewer';

import MousePosition from './cesium/MousePosition';
import './Widgets/widgets.css';

// 设置cesium 静态资源路径
window.CESIUM_BASE_URL = '/';
Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNDkwYWVhOS0wNzI5LTQ3OTEtOWFiMC1kY2M3MTFiM2I2NWQiLCJpZCI6MTkyNTU1LCJpYXQiOjE3MDY1MTM0MTh9.YAPVHr1d7PBuWayCXM9deCxKg3AbtsXUJiVpubVS3NY';

//https://blog.csdn.net/yangwqi/article/details/106714908
/**
用定时器模拟实时获取后台数据 当取到数据后实体同时移动到目标位置 这种方式不再与Cesium时间关联 
实现效果：每秒新增一个坐标；每秒实体运动到相应正确位置且实现实体转向功能
PS：该方法实体经纬度超过正负180，90时需进行坐标计算转为正负180,90范围内的坐标后实体转向才正常；
 */

var entityClickCounts = {};

onMounted(async () => {
  const viewer = new Cesium.Viewer('cesiumContainer', {
    // infoBox: false,
    // selectionIndicator: false,
    // shadows: true,
    // sceneMode: 2, // 初始场景模式
    // shouldAnimate: true,
  });

  // 存储随机生成的实体
  var entities = [];

  // 随机生成6个实体
  for (var i = 0; i < 6; i++) {
    var longitude = Math.random() * 360 - 180;
    var latitude = Math.random() * 180 - 90;

    var entity = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
      point: {
        pixelSize: 10,
        color: Cesium.Color.RED,
      },
    });

    // 将实体添加到entities数组中
    entities.push(entity);
  }

  console.log('entities:', entities);
  viewer.screenSpaceEventHandler.setInputAction(function (click) {
    // 阻止默认的鼠标左击事件行为
    // click.preventDefault();

    var pickedObject = viewer.scene.pick(click.position);
    if (Cesium.defined(pickedObject)) {
      var entity = pickedObject.id;
      if (Cesium.defined(entity)) {
        // 检查实体点击次数是否已存在，如果不存在则初始化为0
        if (!entityClickCounts.hasOwnProperty(entity.id)) {
          entityClickCounts[entity.id] = 0;
        }

        // 增加实体点击次数
        entityClickCounts[entity.id]++;

        // 获取实体位置
        var position = entity.position.getValue(Cesium.JulianDate.now());

        // 创建标签
        var labelEntity = viewer.entities.add({
          position: position,
          label: {
            text: entityClickCounts[entity.id].toString(),
            fillColor: Cesium.Color.WHITE,
            outlineColor: Cesium.Color.BLACK,
            outlineWidth: 2,
            pixelOffset: new Cesium.Cartesian2(0, -20),
            disableDepthTestDistance: Number.POSITIVE_INFINITY,
          },
        });

        // 设置标签自动移除
        viewer.clock.onTick.addEventListener(function (clock) {
          if (!viewer.entities.contains(labelEntity)) {
            return;
          }

          if (entityClickCounts[entity.id] === 0) {
            viewer.entities.remove(labelEntity);
          } else {
            labelEntity.label.text = entityClickCounts[entity.id].toString();
          }
        });
      }
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
});
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
#cesiumContainer {
  height: 90vh;
  width: 90vw;
}
</style>
